<template>
  <div>
    <div class="Banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
            <img :src="carousel.imgUrl" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入Swiper插件
import Swiper from 'swiper'

export default {
  name: 'Carousel',
  props: ['list'],
  watch: {
    // 监听数据，可以保证数据确实发生了变化，但是从服务器取回的数据更新原数据从而引发页面的update，vue中页面的渲染是异步的，所以需要nextTick保证dom结构已经完成
    list () {
      immediate: true;
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          loop: true, // 循环模式选项
          autoplay: {
            disableOnInteraction: false,  // 用户操作swiper之后，是否禁止autoplay
            delay: 2000, // 自动切换的时间间隔（单位ms）
          },

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })
      })

    }
  }
}
</script>

<style scoped>
</style>
